<template>
  <div class="order-refund-item" @click.stop="e => $emit('click', e)">
    <div class="order-refund-item-content">
      <van-image :width="90" :height="90" :radius="4" :src="item.imageUrl"/>
      <div class="order-refund-item-right">
        <div class="van-multi-ellipsis--l2 order-refund-item-name">{{ item.name }}</div>
        <div class="order-item-refund-amount">
          <span class="order-item-refund-amount-label">退款:</span>
          <price :value="item.amount" color="#000" :size="16"/>
        </div>
        <div class="order-item-refund-amount" v-if="item.reason">
          <span class="order-item-refund-reason-label">退款原因:</span><span>{{ item.reason }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Image } from "vant"
import Price from "../Price"

export default {
  name: "OrderRefundItem",
  components: {
    Price,
    [Image.name]: Image,
  },
  props: {
    item: Object,
  },
}
</script>

<style lang="scss" scoped>
@import "../../styles/variables";

.order-refund-item {
  padding: 9px;
  background: $gray-1;

  .order-refund-item-content {
    display: flex;

    .van-image {
      box-shadow: 0 8px 12px #ebedf0;
    }

    .order-refund-item-right {
      flex: 1;
      display: flex;
      flex-direction: column;
      margin-left: 9px;
      font-size: 14px;

      .order-refund-item-name {
        line-height: 1.1rem;
        font-size: 13px;
      }

      .order-item-refund-amount, .order-item-refund-reason {
        display: flex;
        align-items: flex-end;
        line-height: 1rem;
        margin-top: 6px;

        .order-item-refund-amount-label, .order-item-refund-reason-label {
          margin-right: 6px;
        }
      }
    }
  }

  .order-item-actions {
    margin-top: 9px;
  }
}
</style>
